<template>
  <div class="pageIndex">
    <div class="designBox" v-show="false">
      <!-- 设计器的 容器 -->
      <div id="hiprint-printTemplate"></div>
    </div>
  </div>
</template>

<script>
// 局部引入
import { hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint'

export default {
  name: 'printPreview',
  props: {
    item: Object,
  },
  data() {
    return {
      hiprintTemplate: null,
    }
  },
  mounted() {
    // 初始化 provider
    hiprint.init({
      providers: [defaultElementTypeProvider()],
    })
    /**
     * 这里必须要在 onMounted 中去构建 左侧可拖拽元素 或者 设计器
     * 因为都是把元素挂载到对应容器中, 必须要先找到该容器
     */
    this.buildDesigner()
  },
  methods: {
    /**
     * 构建设计器
     * 注意: 必须要在 onMounted 中去构建
     * 因为都是把元素挂载到对应容器中, 必须要先找到该容器
     */
    buildDesigner() {
      // let hiprintTemplate
      // eslint-disable-next-line no-undef
      $('#hiprint-printTemplate').empty() // 先清空, 避免重复构建
      this.hiprintTemplate = new hiprint.PrintTemplate({
        settingContainer: '#PrintElementOptionSetting', // 元素参数容器
      })
      // 构建 并填充到 容器中
      this.hiprintTemplate.design('#hiprint-printTemplate')
    },
    previewFn(json, data) {
      this.buildDesigner()
      this.hiprintTemplate.update(json)
      // 需要填入的数据
      // this.hiprintTemplate.print(re, {}, {})
      this.hiprintTemplate.print(data)

    },
  },
}
</script>
<style lang="scss" scoped></style>
